<!-- 流派 -->
<template>
    <div>
        <el-checkbox-group v-model="selects" size="small" class="mb-2">
            <el-checkbox-button v-for="(city, index) in tipBtnGroup" :key="index" :label="city.label">{{
                city.label
            }}</el-checkbox-button>
        </el-checkbox-group>
        <!-- <div class="mb-2">
            <el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable placeholder="Please Input"
                @select="handleSelect" class="mr-2 w-52" />
            <el-button type="primary" icon="Search" circle size="small" @click="searchMessage()" />
        </div> -->
        <!-- <el-tooltip class="box-item" effect="dark" content="新增角色" placement="left"> -->
        <div class="fixed right-2 top-2 ">
            <el-popover :visible="visible" :width="160">
                <el-input class="mb-2" placeholder="请输入角色名" v-model="newRoleName"></el-input>
                <div style="text-align: right; margin: 0">
                    <el-button size="small" text @click="visible = false">取消</el-button>
                    <el-button size="small" type="primary" @click="addNewRole">添加</el-button>
                </div>
                <template #reference>
                    <el-button type="warning" icon="Plus" circle size="small" @click="visible = true" />
                </template>
            </el-popover>
        </div>
        <!-- </el-tooltip> -->
        <el-dialog v-model="dialogTableVisible" title="选择装备" width="80%" destroy-on-close>
            <div class="flex flex-wrap" v-if="singleView">
                <div v-for="(item, index) in uploadList" class="mb-8 mr-8">
                    <EquBase :equips="item" @click="getEquipMessage"></EquBase>
                </div>
            </div>
            <div v-else>
                <div class="flex items-start">
                    <div class="relative">
                        <div :class="isFree ? 'selected' : 'can-select'" title="是否百变"
                            class="selection absolute right-1 top-1 cursor-pointer" @click="isFree = !isFree"></div>
                        <img :src="singleSelect.icon" alt="" class="equip-icon mb-2" style="width: 60px; height: 60px;">
                        <span class="base-btn" @click="addNewEqu">确 定</span>
                    </div>
                    <div class="tipList">
                        <div v-for="(item, index) in singleSelect.Tips" style="color: #b59834;">
                            {{ index + 1 + "、" }}<span v-for="(text) in getMessage(item)">{{ text }}</span>
                        </div>
                    </div>

                </div>
                <div class="flex w-full">
                    <div class="w-1/3 pr-2 div-line">
                        <div class="text-green-500 my-2">{{ `< 专属属性>` }}</div>
                        <div class="h-96 overflow-y-scroll">
                            <div v-for="(item, index) in singleSelect.message.randomPropsForSelf" @click="selectTip(item)"
                                class="mb-4 flex items-start flex-wrap cursor-pointer">
                                <div :class="singleSelect.Tips.indexOf(item.id) > -1 ? 'selected' : 'can-select'"
                                    class=" selection m-1"></div>
                                <div class="w-11/12">
                                    <div style="color:#726643" class="flex flex-wrap">
                                        <div class="mr-4 w-32">攻击强化：{{ item.attack }}</div>
                                        <div>Buff量：{{ item.buffer }}</div>
                                    </div>
                                    <div style="color: #b59834;">
                                        <span v-for="(desc, idx) in item.props">
                                            {{ desc }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-1/3 pr-2 div-line pl-2">
                        <div class="text-green-500 my-2">{{ `< 部位属性>` }}</div>
                        <div class="h-96 overflow-y-scroll">
                            <div v-for="(item, index) in singleSelect.message.randomPropsForType" @click="selectTip(item)"
                                class="mb-4 flex  items-start flex-wrap cursor-pointer ">
                                <div :class="singleSelect.Tips.indexOf(item.id) > -1 ? 'selected' : 'can-select'"
                                    class="selection  m-1"></div>
                                <div class="w-11/12">
                                    <div style="color:#726643" class="flex flex-wrap">
                                        <div class="mr-4 w-32">攻击强化：{{ item.attack }}</div>
                                        <div>Buff量：{{ item.buffer }}</div>
                                    </div>
                                    <div style="color: #b59834;">
                                        <span v-for="(desc, idx) in item.props">
                                            {{ desc }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-1/3 pl-2 div-line">
                        <div class="text-green-500 my-2">{{ `< 公共属性>` }}</div>
                        <div class="h-96 overflow-y-scroll">
                            <div v-for="(item, index) in singleSelect.message.randomPropsForCommon" @click="selectTip(item)"
                                class="mb-4 flex  items-start flex-wrap cursor-pointer">
                                <div :class="singleSelect.Tips.indexOf(item.id) > -1 ? 'selected' : 'can-select'"
                                    class=" selection m-1"></div>
                                <div class="w-11/12">
                                    <div style="color:#726643" class="flex flex-wrap">
                                        <div class="mr-4 w-32">攻击强化：{{ item.attack }}</div>
                                        <div>Buff量：{{ item.buffer }}</div>
                                    </div>
                                    <div style="color: #b59834;">
                                        <span v-for="(desc, idx) in item.props">
                                            {{ desc }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script lang='ts' setup>
import { ref, onMounted, computed } from 'vue'
import SchoolSetting from '@/static/SchoolSettings'
import { http } from '@/api/request'
import EquBase from '@/components/EquBase.vue'
import type { AttackAndBuff, TipsType, equipMessageType, randomProps } from '@/types/defaults'
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
const $store = useCounterStore();
const { iconList, descList } = storeToRefs($store);
const uploadList = computed<equipMessageType[][]>(() => iconList.value)
const axios = new http();
const Schools = ref(SchoolSetting);
const dialogTableVisible = ref(false)
const selects = ref([1])
const emit = defineEmits(['addRole', 'add', "search"]);
const visible = ref(false);
const singleView = ref(true)
const props = defineProps<{
    tipBtnGroup: TipsType[]
}>()

const newRoleName = ref('')
interface RestaurantItem {
    value: string
    link: string
}
defineExpose({
    dialogTableVisible
})
const state1 = ref('')

const restaurants = ref<RestaurantItem[]>([])
const querySearch = (queryString: string, cb: any) => {
    const results = queryString
        ? restaurants.value.filter(createFilter(queryString))
        : restaurants.value
    cb(results)
}
const createFilter = (queryString: string) => {
    return (restaurant: RestaurantItem) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}
const loadAll = () => {
    return [
        { value: 'vue', link: 'https://github.com/vuejs/vue' },
        { value: 'element', link: 'https://github.com/ElemeFE/element' },
        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
        { value: 'babel', link: 'https://github.com/babel/babel' },
    ]
}
const handleSelect = (item: RestaurantItem) => {
    console.log(item)
}
onMounted(() => {
    restaurants.value = loadAll();
})

const searchMessage = () => {
    emit('search', state1.value)
}
const isFree = ref(false)
const addNewEqu = () => {
    emit('add', {
        id: activeId.value,
        info: JSON.parse(JSON.stringify(singleSelect.value.Tips)),
        free: isFree.value
    });
    activeId.value = 0;
    singleView.value = true;
    singleSelect.value = {
        icon: '',
        message: {
            randomPropsForCommon: [],
            randomPropsForSelf: [],
            randomPropsForType: []
        },
        Tips: []
    }
    dialogTableVisible.value = false;
}
const addNewRole = () => {
    emit('addRole', newRoleName.value);
    newRoleName.value = ''
    visible.value = false;
}

const singleSelect = ref<{
    icon: string,
    message: randomProps,
    Tips: number[]
}>({
    icon: '',
    message: {
        randomPropsForCommon: [],
        randomPropsForSelf: [],
        randomPropsForType: []
    },
    Tips: []
})

const activeId = ref<number>(0)
const getEquipMessage = async (item: any) => {
    activeId.value = item.id
    const fdIndex = $store.descExist(item.id);
    let message: randomProps;
    if (fdIndex > -1) {
        message = descList.value[fdIndex].data
    } else {
        message = (await axios.getSingleEquipment(item.id)).data;
        console.log(message)
        $store.addDesc(item.id, message)
    }
    singleSelect.value.message = message;
    singleSelect.value.icon = getIcon(item);
    singleView.value = false
}

const getIcon = (equip: any) => {
    let url = ''
    if (equip) {
        url = equip.icon.indexOf('http') > -1 ? equip.icon : 'https://www.skycity.top:8018/equipment' + equip.icon
    }
    return url
};

const selectTip = (message: AttackAndBuff) => {
    if (singleSelect.value.Tips.indexOf(message.id) > -1) {
        singleSelect.value.Tips.splice(singleSelect.value.Tips.indexOf(message.id), 1);
    } else {
        singleSelect.value.Tips.length < 4 ? singleSelect.value.Tips.push(message.id) : '';
    }
}

const getMessage = (id: number) => {
    let ansId: string[] = []
    singleSelect.value.message.randomPropsForCommon.forEach(item => {
        if (item.id == id) {
            ansId = item.props2
        }
    })
    singleSelect.value.message.randomPropsForSelf.forEach(item => {
        if (item.id == id) {
            ansId = item.props2
        }
    })
    singleSelect.value.message.randomPropsForType.forEach(item => {
        if (item.id == id) {
            ansId = item.props2
        }
    })
    return ansId
}
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */

.selected {
    background-image: url(https://www.skycity.top:8018/dnfstatic/images/icons/base/checkbox_checked.png);
}

.can-select {
    background-image: url(https://www.skycity.top:8018/dnfstatic/images/icons/base/checkbox_uncheck.png);

    &:hover {
        background-image: url(https://www.skycity.top:8018/dnfstatic/images/icons/base/checkbox_hover.png);
    }
}

.selection {
    width: 12px;
    height: 12px;
}

.div-line {
    border-right: 1px solid #303030;
}

.tipList {
    margin-left: 1rem;
}
</style>